<template>
	<view class="my_container">
		<CustomNavbarTwo :title="pageTitle" />
		<view class="my_container_body">
			<view class="my_container_body_head"></view>
			<view class="my_container_body_body">
				<view class="background-view-image">
					<u-swiper imgMode="scaleToFill" height="240rpx" :list="bannerList" indicator indicatorMode="line"
						circular radius="24rpx"></u-swiper>
				</view>
				<view class="head_text">
					<u-read-more :toggle="true" showHeight="170rpx" color="#19E820" :shadowStyle="shadowStyle">
						<rich-text style="color: #000000" :nodes="classInfo.contentInfo"></rich-text>
					</u-read-more>
				</view>
				<view class="text_item">
					<view class="tetx_btn" @click="handleView">查看</view>
				</view>
				<view v-if="classList.length > 0">
					<view @tap="goDetail(item.id)" v-for="(item, index) in classList" :key="index" class="item_card">
						<image class="item_image" mode="scaleToFill" :src="item.picUrl"></image>
						<view class="item_right">
							<view class="item_info">
								{{ item.title }}
							</view>
							<view class="two">{{ item.contentInfo }}</view>
							<view class="three">
								<view class="time">
									<image class="date_image" src="../../static/images/time.png"></image>
									{{ item.pubTime }}
								</view>
							</view>
							<view class="fo">
								<view class="th">
									<image class="date_image" src="../../static/images/view.png"></image>
									<view class="date">{{ item.viewCount }}</view>
								</view>
								<view class="th">
									<image class="date_image" src="../../static/images/message.png"></image>
									<view class="date">{{ item.commentCount }}</view>
								</view>
								<view @tap.stop="handleCollect(item, index)" class="th">
									<image v-if="item.likeFlag == 0" class="date_image"
										src="../../static/images/collect.png"></image>
									<image v-else class="date_image" src="../../static/images/like1.png"></image>
									<view class="date">{{ item.likeCount }}</view>
								</view>
								<view class="th four">
									<image class="b-img" src="../../static/images/zhaunfa.png"></image>
									<button class="share-btn" @tap="handShareCountAdd(item.id, index)" open-type="share"
										@tap.stop> 分享{{ item.shareCount == null ? 0 : item.shareCount }}
									</button>
								</view>
							</view>
						</view>
					</view>
				</view>
				<u-empty v-else mode="list"></u-empty>
				<view style="height: 36rpx"></view>
			</view>
		</view>
	</view>
</template>
<script>
	import CustomNavbarTwo from '@/components/CustomNavbarTwo.vue';
	const api = require('../../util/api.js');
	export default {
		components: {
			CustomNavbarTwo
		},
		data() {
			return {
				classInfo: {},
				classList: [],
				bannerList: [],
				dataList: [],
				shadowStyle: {
					backgroundImage: 'none',
					paddingTop: '0',
					marginTop: '20rpx'
				},
				fenxiangList: [{
					id: '123',
					time: '2024.10.20',
					name: '徐州中再生公司',
					title: '第一期芬姐分享会',
					url: '../../static/imags/studyindex.png'
				}, {
					id: '123',
					time: '2024.10.20',
					name: '徐州中再生公司',
					title: '第二期芬姐分享会',
					url: '../../static/imags/studyindex.png'
				}, {
					id: '123',
					time: '2024.10.20',
					name: '徐州中再生公司',
					title: '第三期芬姐分享会',
					url: '../../static/imags/studyindex.png'
				}, {
					id: '123',
					time: '2024.10.20',
					name: '徐州中再生公司',
					title: '第四期芬姐分享会',
					url: '../../static/imags/studyindex.png'
				}],
				pageTitle: '再生资源行业扶持政策',
				showSex: false,
				content: '分享会介绍：经过上述讨论, 随机一段废话因何而发生?在这种不可避免的冲突下，我们必须解决这个问题德国曾经提到过, 只有在人群中间，才能认识自己。这启发了我. 总结的来说, 一般来讲,我们都必须务必慎重的考虑考虑. 总结的来说, 带着这些问题, 我们来审视一下随机一段废话. 既然如何, 生活中, 若 '
			};
		},
		onLoad() {
			this.getList();
			this.getClassList();
			this.getBannerList();
			wx.showShareMenu({
				withShareTicket: true,
				//设置下方的Menus菜单，才能够让发送给朋友与分享到朋友圈两个按钮可以点击
				menus: ['shareAppMessage', 'shareTimeline']
			});
		},
		onShareAppMessage(res) {
			if (res.from === 'button') {
				// 来自页面内分享按钮
				console.log(res.target);
			}
			return {
				title: '找纸塑网一废纸废塑料AI获客平台', //分享的名称
				path: '/pages/login/index',
				mpId: 'wx312947ac8d5e65e9' //此处配置微信小程序的AppId
			};
		},
		//分享到朋友圈
		onShareTimeline(res) {
			return {
				title: '找纸塑网一废纸废塑料AI获客平台',
				type: 0,
				summary: ''
			};
		},
		methods: {
			//增加分享次数
			handShareCountAdd(id, index) {
				this.$https.post(this.$api.getShareCountAdd, {
					courseDetailId: id
				}).then((res) => {
					if (res.code === 200) {
						this.classList[index].shareCount++;
					} else {
						uni.showToast({
							title: res.msg,
							icon: 'none'
						});
					}
				});
			},
			//查看介绍
			handleView() {
				uni.navigateTo({
					url: `/pages/introDetail/index?id=` + this.classInfo.id
				});
			},
			//获取轮播图
			getBannerList() {
				this.$https.post(this.$api.getBannerList, {
					bannerType: '14'
				}).then((res) => {
					if (res.code === 200) {
						this.bannerList = res.data.map((item) => {
							return item.content;
						});
					} else {
						uni.showToast({
							title: res.msg,
							icon: 'none'
						});
					}
				});
			},
			//点赞
			handleCollect(item, index) {
				this.$https.post(this.$api.getCourseLike, {
					pubInfoId: item.id,
					operateType: 3,
					processType: item.likeFlag == 0 ? 1 : 0
				}).then((res) => {
					if (res.code === 200) {
						this.getClassList();
					} else {
						uni.showToast({
							title: res.msg,
							icon: 'none'
						});
					}
				});
			},
			//获取分享会列表
			getList() {
				this.$https.post(this.$api.getCourseInfo, {
					resourceType: 3
				}).then((res) => {
					if (res.code === 200) {
						console.log(res);
						this.classInfo = res.data;
					} else {
						uni.showToast({
							title: res.msg,
							icon: 'none'
						});
					}
				});
			},
			//获取课堂列表
			getClassList() {
				this.$https.post(this.$api.getClassList, {
					resourceType: 3
				}).then((res) => {
					if (res.code === 200) {
						console.log(res);
						this.classList = res.data;
					} else {
						uni.showToast({
							title: res.msg,
							icon: 'none'
						});
					}
				});
			},
			goDetail(id) {
				uni.navigateTo({
					url: `/page/zaishengziyuan/detail?id=${id}`
				});
			}
		}
	};
</script>
<style lang="scss" scoped>
	.my_container {
		width: 100%;
		background: linear-gradient(180deg, #ddffde 0%, #f7f7f7 29%, #f7f7f7 100%);
		border-radius: 0rpx 0rpx 0rpx 0rpx;

		.share-btn {
			font-size: 20rpx;
			width: 60rpx;
		}

		.my_container_body {
			width: 750rpx;

			.my_container_body_head {
				width: 686rpx;
				height: 176rpx;
			}

			.my_container_body_body {
				width: 686rpx;
				margin-left: 32rpx;
				margin-top: 20rpx;

				.head_text {
					width: 686rpx;
					margin-top: 32rpx;
				}

				.text_item {
					display: flex;
					justify-content: flex-end;

					.tetx_btn {
						padding: 10rpx 40rpx;
						border-radius: 40rpx;
						background: #19e820;
						font-family: Alibaba PuHuiTi, Alibaba PuHuiTi;
						font-weight: 400;
						font-size: 28rpx;
						color: #ffffff;
					}
				}

				.item_card {
					margin-top: 20rpx;
					width: 686rpx;
					height: 250rpx;
					background: #ffffff;
					border-radius: 24rpx;
					display: flex;

					.item_image {
						width: 200rpx;
						height: 220rpx;
						border-radius: 20rpx 20rpx 20rpx 20rpx;
						margin-top: 20rpx;
						margin-left: 20rpx;
					}

					.item_right {
						margin-left: 24rpx;
						margin-top: 24rpx;
						width: 430rpx;
						display: flex;
						flex-direction: column;
						justify-content: space-around;

						.item_info {
							height: 40rpx;
							font-weight: 550;
							font-size: 28rpx;
							color: #333333;
							line-height: 39rpx;
							text-align: left;
						}

						.two {
							font-weight: 400;
							font-size: 24rpx;
							color: #777777;
							line-height: 34rpx;
							margin-top: 12rpx;
							overflow: hidden;
							/* 确保超出部分的文本会被隐藏 */
							text-overflow: ellipsis;
							/* 超出部分显示省略号 */
							display: -webkit-box;
							/* 使用弹性盒子模型 */
							-webkit-line-clamp: 2;
							/* 限制显示两行 */
							-webkit-box-orient: vertical;
							/* 垂直排列子元素 */
						}

						.three {
							display: flex;
							justify-content: space-between;
							font-size: 24rpx;
							color: #777777;

							.time {
								display: flex;
								align-items: center;

								.date_image {
									width: 36rpx;
									height: 36rpx;
									margin-top: 8.5rpx;
								}
							}

							.address {
								display: flex;
								align-items: center;

								.date_image {
									width: 36rpx;
									height: 36rpx;
									margin-top: 8.5rpx;
								}
							}
						}

						.fo {
							width: 432rpx;
							height: 53rpx;
							line-height: 53rpx;
							display: flex;

							.tr {
								width: 180rpx;
								height: 53rpx;
								line-height: 53rpx;
								font-weight: 400;
								font-size: 24rpx;
								color: #777777;
							}

							.th {
								width: 116rpx;
								height: 53rpx;
								line-height: 53rpx;
								display: flex;

								.date_image {
									width: 36rpx;
									height: 36rpx;
									margin-top: 8.5rpx;
								}

								.date {
									height: 53rpx;
									font-weight: 400;
									font-size: 24rpx;
									color: #777777;
									line-height: 53rpx;
									text-align: left;
									margin-left: 10rpx;
								}
							}

							.four {
								width: 140rpx;
								position: relative;
								display: flex;
								align-items: center;

								.b-img {
									width: 40rpx;
									height: 40rpx;
								}

								.share-btn {
									width: 100%;
									text-align: left;
									background-color: transparent;
									padding-left: 40rpx;
									position: absolute;
									font-size: 22rpx;
									top: 0;
								}
							}
						}
					}
				}

				.head_body {
					margin-top: 36rpx;
					width: 686rpx;
					height: 584rpx;
					background: #ffffff;
					border-radius: 24rpx 24rpx 24rpx 24rpx;

					.o1 {
						margin-left: 22rpx;
						width: 642rpx;
						height: 62rpx;
						font-weight: 550;
						font-size: 28rpx;
						color: #333333;
						line-height: 62rpx;
						text-align: left;
					}

					.o2 {
						width: 642rpx;
						height: 244rpx;
						border-radius: 20rpx 20rpx 20rpx 20rpx;
						margin-left: 22rpx;
					}

					.o3 {
						width: 642rpx;
						height: 68rpx;
						margin-top: 20rpx;
						font-size: 24rpx;
						margin-left: 22rpx;
						color: #575252;
						line-height: 34rpx;
						overflow: hidden;
						/* 确保超出部分的文本会被隐藏 */
						text-overflow: ellipsis;
						/* 超出部分显示省略号 */
						display: -webkit-box;
						/* 使用弹性盒子模型 */
						-webkit-line-clamp: 2;
						/* 限制显示两行 */
						-webkit-box-orient: vertical;
						/* 垂直排列子元素 */
					}

					.o4 {
						height: 42rpx;
						width: 642rpx;
						margin-left: 22rpx;
						display: flex;
						font-weight: 400;
						font-size: 24rpx;
						color: #777777;

						.o5 {
							width: 36rpx;
							height: 36rpx;
							margin-top: 3rpx;
						}

						.o6 {
							height: 42rpx;
							line-height: 42rpx;
							margin-left: 10rpx;
						}
					}

					.o7 {
						font-weight: 400;
						font-size: 24rpx;
						color: #777777;
						height: 42rpx;
						width: 642rpx;
						margin-left: 22rpx;
						display: flex;

						:not(:first-child) {
							margin-left: 10rpx;
						}

						.o8 {
							width: 36rpx;
							height: 36rpx;
							margin-top: 3rpx;
						}

						.o9 {
							height: 42rpx;
							line-height: 42rpx;
							width: 80rpx;
						}

						.o10 {
							height: 42rpx;
							line-height: 42rpx;
							width: 232rpx;
						}
					}

					.o11 {
						margin-top: 14rpx;
						width: 574rpx;
						height: 68rpx;
						background: #1ee825;
						border-radius: 84rpx 84rpx 84rpx 84rpx;
						margin-left: 56rpx;
						font-weight: 500;
						font-size: 28rpx;
						color: #ffffff;
						text-align: center;
						line-height: 68rpx;
					}
				}
			}

			.none {
				display: flex;
				flex-direction: column;
				justify-content: center;
				align-items: center;
				color: #575252;

				image {
					width: 50%;
				}
			}
		}
	}
</style>